<template>
  <div class="absence-prediction">
    <div class="header">
      <h2>缺勤预测系统</h2>
      <div class="controls">
        <el-select v-model="selectedCourse" placeholder="选择课程" @change="fetchPredictionsByCourse" clearable>
          <el-option label="全部课程" value=""></el-option>
          <el-option
            v-for="course in courses"
            :key="course"
            :label="course"
            :value="course">
          </el-option>
        </el-select>
        <el-button type="primary" @click="refreshData" :loading="loading">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
        
      </div>
    </div>

    <!-- 最可能缺勤的前三名学生 -->
    <div class="prediction-cards">
      <h3>{{ selectedCourse ? `${selectedCourse}课程` : '全部课程' }} - 最可能缺勤的前三名学生</h3>
      <div class="cards-container" v-loading="loading">
        <div
          v-for="(prediction, index) in predictions"
          :key="prediction.id"
          class="prediction-card"
          :class="getRankClass(index)">
          
          <div class="rank-badge">
            <i :class="getRankIcon(index)"></i>
            第{{ index + 1 }}名
          </div>
          
          <div class="student-info">
            <h4>学生ID: {{ prediction.studentId }}</h4>
            <p class="course-name">课程: {{ prediction.courseName }}</p>
          </div>
          
          <div class="probability-section">
            <div class="probability-circle">
              <el-progress
                type="dashboard"
                :percentage="Math.round(prediction.probability )"
                :color="getProgressColor(prediction.probability)">
                <template #default="{ percentage }">
                  <span class="percentage-value">{{ percentage }}%</span>
                  <div class="percentage-label">缺勤概率</div>
                </template>
              </el-progress>
            </div>
          </div>
          
          <div class="additional-info">
            <el-tag :type="getProbabilityTag(prediction.probability)" size="small">
              {{ getProbabilityLevel(prediction.probability) }}
            </el-tag>
            <div class="update-time">
              更新时间: {{ formatTime(prediction.lastUpdated) }}
            </div>
          </div>
        </div>
      </div>
      
    
    </div>
  </div>
</template>

<script>
export default {
  name: 'AbsencePrediction',
  data() {
    return {
      predictions: [],
      courses: [],
      selectedCourse: '',
      loading: false,
      mockLoading: false
    }
  },
  
  mounted() {
    this.init()
  },
  
  methods: {
    async init() {
      await this.fetchCourses()
      await this.fetchPredictions()
    },
    
    async fetchCourses() {
      try {
        const response = await this.$request.post('/prediction/courses', {})
        if (response.success) {
          this.courses = response.data
        } else {
          this.$message.error(response.message || '获取课程列表失败')
        }
      } catch (error) {
        console.error('获取课程列表失败:', error)
        this.$message.error('获取课程列表失败')
      }
    },
    
    async fetchPredictions() {
      this.loading = true
      try {
        const response = await this.$request.post('/prediction/top-three', {})
        if (response.success) {
          this.predictions = response.data
        } else {
          this.$message.error(response.message || '获取预测数据失败')
        }
      } catch (error) {
        console.error('获取预测数据失败:', error)
        this.$message.error('获取预测数据失败')
      } finally {
        this.loading = false
      }
    },
    
    async fetchPredictionsByCourse() {
      if (!this.selectedCourse) {
        await this.fetchPredictions()
        return
      }
      
      this.loading = true
      try {
        const response = await this.$request.post('/prediction/top-three-by-course', {
          courseName: this.selectedCourse
        })
        if (response.success) {
          this.predictions = response.data
        } else {
          this.$message.error(response.message || '获取课程预测数据失败')
        }
      } catch (error) {
        console.error('获取课程预测数据失败:', error)
        this.$message.error('获取课程预测数据失败')
      } finally {
        this.loading = false
      }
    },
    
    async generateMockData() {
      this.mockLoading = true
      try {
        const response = await this.$request.post('/prediction/generate-mock-data', {
          operator: 'hoaixanghao', // 当前用户
          timestamp: new Date().toISOString()
        })
        if (response.success) {
          this.$message.success('模拟数据生成成功')
          await this.init()
        } else {
          this.$message.error(response.message || '生成模拟数据失败')
        }
      } catch (error) {
        console.error('生成模拟数据失败:', error)
        this.$message.error('生成模拟数据失败')
      } finally {
        this.mockLoading = false
      }
    },
    
    async refreshData() {
      await this.init()
      this.$message.success('数据刷新成功')
    },
    
    // 查询特定学生的预测信息
    async fetchStudentPredictions(studentId) {
      try {
        const response = await this.$request.post('/prediction/by-student', {
          studentId: studentId
        })
        if (response.success) {
          return response.data
        } else {
          this.$message.error(response.message || '获取学生预测数据失败')
          return []
        }
      } catch (error) {
        console.error('获取学生预测数据失败:', error)
        this.$message.error('获取学生预测数据失败')
        return []
      }
    },
    
    getRankClass(index) {
      const classes = ['first-place', 'second-place', 'third-place']
      return classes[index] || ''
    },
    
    getRankIcon(index) {
      const icons = ['el-icon-trophy', 'el-icon-medal', 'el-icon-star-on']
      return icons[index] || 'el-icon-star-off'
    },
    
    getProgressColor(probability) {
      if (probability >= 0.7) return '#f56c6c'
      if (probability >= 0.5) return '#e6a23c'
      return '#67c23a'
    },
    
    getProbabilityTag(probability) {
      if (probability >= 0.7) return 'danger'
      if (probability >= 0.5) return 'warning'
      return 'success'
    },
    
    getProbabilityLevel(probability) {
      if (probability >= 0.7) return '高风险'
      if (probability >= 0.5) return '中风险'
      return '低风险'
    },
    
    formatTime(timeStr) {
      if (!timeStr) return '未知'
      return new Date(timeStr).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.absence-prediction {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header h2 {
  margin: 0;
  color: #303133;
}

.controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.prediction-cards h3 {
  margin-bottom: 20px;
  color: #303133;
  text-align: center;
}

.cards-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.prediction-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  min-width: 300px;
  max-width: 350px;
}

.prediction-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.first-place {
  border-top: 4px solid #ffd700;
}

.second-place {
  border-top: 4px solid #c0c0c0;
}

.third-place {
  border-top: 4px solid #cd7f32;
}

.rank-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-weight: bold;
  margin-bottom: 15px;
}

.student-info h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
}

.course-name {
  color: #909399;
  margin: 0 0 20px 0;
}

.probability-section {
  text-align: center;
  margin: 20px 0;
}

.probability-circle {
  display: inline-block;
}

.percentage-value {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.percentage-label {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.additional-info {
  text-align: center;
}

.update-time {
  font-size: 12px;
  color: #c0c4cc;
  margin-top: 10px;
}

.no-data {
  text-align: center;
  padding: 50px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 15px;
  }
  
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
  
  .prediction-card {
    min-width: 280px;
    max-width: 100%;
  }
}
</style>